<template>
  <div class="header">
    <div class="location">
      <img :src="Location" alt srcset>
      {{location}}
    </div>
    <div class="rink" @click="toMessage">
      <img :src="Rink" alt srcset>
      <div class="point" v-if="msg_count"></div>
    </div>
  </div>
</template>

<script>
import Rink from "../../assets/common/rink.png";
import Location from "../../assets/common/location.png";
import api from "../../api";
import { setTimeout } from "timers";
export default {
  data() {
    return {
      Rink,
      Location,
      msg_count: "",
      uid: this.$store.state.uid
    };
  },
  methods: {
    getUserInfo() {
      api.usercenter.getUserInfo(this.uid, res => {
        this.msg_count = res.msg_count;
      });
    },
    toMessage() {
      this.$routerPush(this, `/pages/message/Index`);
    }
  },
  computed: {
    location() {
      var city = localStorage.getItem("city");
      console.log(city)
      if (city != 'undefined') {
        city = decodeURI(city)
        return city;
      } else {
        return "暂无定位";
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.getUserInfo();
    }, 200);
  }
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  padding: 2vw 3vw;
  font-size: 3.5vw;
  background: #fff;
  justify-content: space-between;
  align-items: center;
  .location,
  .rink {
    display: flex;
    align-items: center;
    position: relative;
  }
  img {
    width: 6vw;
    height: 6vw;
  }
  .rink {
    img {
      margin-right: 2vw;
    }
    .point {
      position: absolute;
      right: 2vw;
      top: 0;
      width: 1vw;
      height: 1vw;
      background: #ff0000;
      border-radius: 50%;
    }
  }
}
</style>